<template>
<!-- 废品库 -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="Pagination" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="Pagination.key" placeholder="请输入快递单号" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- =================列表表单 =====================  -->
    <div class="incolumn_from">
      <el-table
        :data="tableData_SCRAPLIBRARY"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="170"></el-table-column>
        <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="productNumber" label="产品图号" align="center">
        </el-table-column>
        <el-table-column prop="feipinNumber" label="库存数量" align="center">
        </el-table-column>
        <el-table-column label="入库时间" align="center">
          <template v-slot="scope">
            {{ renderTime(scope.row.createOnTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.feipinNumber>200">过量</span>
            <span v-if="scope.row.feipinNumber<=200">正常</span>
<!--            <span v-if="scope.row.kucunXiaxian<=scope.row.chengpinNumber<=scope.row.kucunShangxian">正常</span>-->
<!--            <span v-else-if="scope.row.chengpinNumber<scope.row.kucunXiaxian">紧张</span>-->
<!--            <span v-else-if="scope.row.chengpinNumber>scope.row.kucunShangxian">积压</span>-->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row.whId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="Pagination.current"
          :page-size="Pagination.pagesize"
          @current-change="handleCurrentChange"
          :total="Pagination.total"
        ></el-pagination>
      </div>
      <!--============弹框==================-->


    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {
  },
  computed: {
    autoHeightTable () {
      return document.documentElement.scrollHeight - 251 -90
    }
  },
  data () {
      return {
        /**************************数据列表**********************************/
        tableData_SCRAPLIBRARY: [],
        formInline: {},
        /**********************************分页数据对象***************************************/
        Pagination: {
          beginTime: "",
          endTime: "",
          key: "",
          total: 1,//总共页
          current: 1,//当前页
          pagesize: 10,//页面数据个数
        },
      }

  },
  created() {
    this.getList();
  },
  methods: {
    //产品的详情
    showDetail(id) {
      console.log(id)
      this.$router.push({path: "./WAREProductDetail", query: {
          id: id,
          type: 2
        }});
    },
    //列表获取
    getList() {
      const data = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": 0
      }
      axios.post("/JX_java/warehouse/getWarehouseList?type="+2, data).then(res => {
        console.log(res.data.data.content,1)
        let params = res.data.data;
        this.tableData_SCRAPLIBRARY = params.content;


      })
    },
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
    },
    //分页方法
    handleCurrentChange(e) {
      this.Pagination.current = e;
      this.getList();
    },
    onsubmit() {
      this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Suppliermanagement .search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px 20px;
}

.Suppliermanagement .demo-form-inline {
  display: inline-block;
}

.Suppliermanagement .el-pagination {
  margin-top: 15px;
  text-align: center;
}

.Suppliermanagement .ebtn {
  float: right;
  margin-right: 20px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
</style>
